<template>
  <div>
    <div>
      <a-input-group compact>
        <!-- <a-input v-model:value="curPhone" type="text" />
        <a-button type="primary" @click="addPhone">添加</a-button> -->
        <a-input-search v-model:value="curPhone" placeholder="请输入手机号码" enter-button="添加" @search="addPhone" />
      </a-input-group>
    </div>
    <div v-if="value.length > 0" class="mt-2">
      <a-tag v-for="(phone, i) in value" :key="phone" color="processing" closable @close="removePhone(i)">
        {{ phone }}
      </a-tag>
    </div>
  </div>
</template>
<script setup lang="ts">
import { message } from "ant-design-vue";
import { ref } from "vue";

const props = defineProps<{
  value: string[];
}>();

const emits = defineEmits(["change"]);
const curPhone = ref("");

function addPhone() {
  if (!/^1[3456789]\d{9}$/.test(curPhone.value)) {
    return message.info("请输入正确的手机号码");
  }
  const isExist = !!props.value.find((val) => val === curPhone.value);
  if (isExist) {
    return message.info("手机号已存在");
  }
  const copy = [...props.value];
  copy.push(curPhone.value);
  emits("change", copy);
  curPhone.value = "";
}

function removePhone(index) {
  const copy = [...props.value];
  copy.splice(index, 1);
  emits("change", copy);
}
</script>
